<template>
  <div class="articleInfoPage">
    <div class="fixedBox headerBox">
      <van-nav-bar title="消息详情" left-arrow @click-left="goBack" />
    </div>
    <div class="articleInfo" v-html="articleInfo" :style="{'paddingTop': `calc(${1+'rem + '+$headerH+'px'})`}"></div>
  </div>
</template>


<script>
import messageListVue from './messageList.vue';
export default {
  data() {
    return {
       articleInfo:'',
       id:''
    };
  },
  created() {
    this.id = this.$route.query.id
    this.getArticleFunc()
  },
  methods: {
    async getArticleFunc(){
        let res = await this.$http.getArticle({id:this.id});
        if (res) {
          this.articleInfo=res.data.content
        }
    },
    goBack(){
      this.$router.push({name:'messageList'})
    }
  }
};
</script>
<style>
.articleInfo img{
  max-width: 100%
}
</style>
<style scoped>
.articleInfoPage{
  height: 100vh;
  background: #fff;
  overflow-x: hidden;
}
.articleInfoPage .articleInfo{
  padding: 0.4rem;
  padding-top: 46px;
}
.articleInfoPage img{
  max-width: 100%;
}
.fixedBox{
  position: fixed;
  width: 100%;
  z-index: 1;
  background: #fff;
}
</style>
